{layout name="layout" /}
<!-- Imported scripts on this page -->
<script src="/static/js/rwd-table/js/rwd-table.min.js"></script>
<script src="/static/js/datatables/js/jquery.dataTables.min.js"></script>
<!-- Imported scripts on this page -->
<script src="/static/js/datatables/dataTables.bootstrap.js"></script>
<script src="/static/js/datatables/yadcf/jquery.dataTables.yadcf.js"></script>
<script src="/static/js/datatables/tabletools/dataTables.tableTools.min.js"></script>
<div class="page-title">

    <div class="breadcrumb-env pull-left">

        <ol class="breadcrumb bc-1">
            <li>
                <a href="{:url('Category/index')}"><i class="fa-home"></i>首页</a>
            </li>
            <li>
                <a href="">基本设置</a>
            </li>
            <li class="active">
                <strong>产品类别</strong>
            </li>
        </ol>

    </div>
</div>
<div class="row">
    <div class="col-md-12">

        <!-- ******************************************************************************************************** -->
        <!-- Removing search and results count filter -->
        <div class="panel panel-default">
            <div class="panel-heading btn-toolbar">
                <!-- <h3 class="panel-title">员工列表</h3> -->
                <div class="btn-group focus-btn-group">
                    <button class="btn btn-default btn-primary" onclick="showAjaxModal();">
                        <span class="fa-plus"></span> 添 加
                    </button>
                </div>
                <div class="btn-group dropdown-btn-group pull-right">

                    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">过滤某列数据
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li class="checkbox-row">
                            <div class="cbr-replaced cbr-checked">
                                <div class="cbr-input">
                                    <input type="checkbox" name="toggle-id916bcee584545-col-1"
                                           id="toggle-id916bcee584545-col-1" value="id916bcee584545-col-1"
                                           class="cbr cbr-done"></div>
                                <div class="cbr-state">
                                    <span></span>
                                </div>
                            </div>
                            <label for="toggle-id916bcee584545-col-1">用户名</label>
                        </li>
                    </ul>
                    <button class="btn btn-default">导出</button>
                </div>
            </div>
            <div class="panel-body">

                <!-- searach -->
                <div class="btn-toolbar">
                    <form class="form-inline" style="margin-bottom:15px;" class="search-tool">
                            <span>
                                <label class="control-label">类别名称</label>   
                                <input type="text" class="form-control" placeholder="类别名称" name="name"
                                       value="{$Request.get.name}">
                            </span>

                        <span style="margin-left: 15px;">
                                <label class="control-label">类别编号</label>      
                                <input type="text" class="form-control" placeholder="类别编号" name="sn"
                                       value="{$Request.get.sn}">
                            </span>
                        <span style="margin-left: 15px;">
                                <label class="control-label">产品类别</label>
                                <select class="form-control" name="pid">
                                    <option value="">全部</option>
{volist name='category' id='vo'}
                                        <option value="{$vo.id}" {eq name="$vo.id" value="$Request.get.pid" }
                                                selected="selected" {/eq} >{$vo.name}</option>
                                    {/volist}
        
                                </select>   
                            </span>
                        <span style="margin-left: 15px;">
                                <label class="control-label">类别状态</label>
                                <select class="form-control" name="status">
                                    <option value=""
                                            {eq name="Request.get.status" value=" " } selected="selected" {/eq}
                                    >全部</option>
                                    <option value="0"
                                            {eq name="Request.get.status" value="0" } selected="selected" {/eq}
                                    >正常</option>
                                    <option value="1"
                                            {eq name="Request.get.status" value="1" } selected="selected" {/eq}
                                    >废弃</option>
                                </select>   
                            </span>
                        <span style="margin-left: 15px;">
                                <button class="btn btn-default btn-primary" type="submit" style="margin-top:10px;">
                                    <span class="fa-search"></span> 搜 索
                                </button> 
                            </span>

                    </form>

                </div>
                <!-- searach -->
                <script type="text/javascript">
                    jQuery(document).ready(function ($) {
                        $("#example-2").dataTable({
                            dom: "t" + "<'row'<'col-xs-6'i><'col-xs-6'p>>",
                            dom: "t" + "<'row'<'col-xs-6'><'col-xs-6'>>",
                            aoColumns: [
                                {bSortable: false},
                                null,
                                null,
                                null,
                                null,
                                null,
                                {bSortable: false}
                            ],
                        });

                        // Replace checkboxes when they appear
                        var $state = $("#example-2 thead input[type='checkbox']");

                        $("#example-2").on('draw.dt', function () {
                            cbr_replace();

                            $state.trigger('change');
                        });

                        // Script to select all checkboxes
                        $state.on('change', function (ev) {
                            var $chcks = $("#example-2 tbody input[type='checkbox']");

                            if ($state.is(':checked')) {
                                $chcks.prop('checked', true).trigger('change');
                            } else {
                                $chcks.prop('checked', false).trigger('change');
                            }
                        });
                    });
                </script>

                <table class="table table-bordered table-striped" id="example-2">
                    <thead>
                    <tr>
                        <th class="no-sorting">
                            <input type="checkbox" class="cbr">
                        </th>
                        <th>ID</th>
                        <th>类别名称</th>
                        <th>上级名称</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>

                    <tbody class="middle-align">

                    {volist name='list' id='vo'}
                    <tr>
                        <td>
                            <input type="checkbox" class="cbr">
                        </td>
                        <td> {$vo.id}</td>
                        <td> {$vo.name}</td>
                        <td> {$vo->getFather->name ? $vo.getFather.name : '默认'}</td>
                        <td> {$vo.status==0?'正常':'废弃'}</td>
                        <td> {:date('Y-m-d H:i:s',$vo->add_time)}</td>
                        <td>
                            <a href="javascript:;"
                               class="btn btn-secondary btn-sm btn-icon icon-left"
                               onclick="editAjaxModal('{:url('/Category/edit/id/'.$vo->id)}')">
                                编辑
                            </a>

                            <a ref="javascript:;" class="btn btn-danger btn-sm btn-icon icon-left"
                               onclick="del('{$vo.id}')">
                                删除
                            </a>
                        </td>
                    </tr>
                    {/volist}
                    </tbody>
                </table>
                <div class="row">
                    <div class="col-xs-6">
                        <div class="dataTables_info" id="example-3_info" role="status" aria-live="polite"> 共{:count(
                            $list ) } 行数据
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="dataTables_paginate paging_simple_numbers" id="example-3_paginate">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- *********************************************************************************************************************** -->
        <!-- Modal add (Ajax Modal)-->
        <div class="modal fade " id="modal-add">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">添加类别</h4>
                    </div>

                    <div class="modal-body">
                        Content is loading...
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-info" onclick="add_from()">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal edit (Ajax Modal)-->
        <div class="modal fade " id="modal-edit">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">编辑类别</h4>
                    </div>

                    <div class="modal-body">
                        Content is loading...
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-info" onclick="edit_from()">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            //add
            function showAjaxModal() {
                jQuery('#modal-add').modal('show', {backdrop: 'static'});

                jQuery.ajax({
                    url: "{:url('Category/create')}",
                    success: function (response) {
                        jQuery('#modal-add .modal-body').html(response);
                    }
                });
            }

            function add_from() {
                var res = $(".add-form").serializeArray();
                $.post("{:url('Category/save')}", res, function (data) {
                    if (data.error > 0) {
                        toastr.error(data.msg);
                    } else {
                        toastr.success(data.msg);
                        jQuery('#modal-add').modal('hide');
                        location.reload();
                    }
                }, "json");
            }

            //edit
            function editAjaxModal(url) {
                jQuery('#modal-edit').modal('show', {backdrop: 'static'});

                jQuery.ajax({
                    url: url,
                    success: function (response) {
                        jQuery('#modal-edit .modal-body').html(response);
                    }
                });
            }

            function edit_from() {
                var res = $(".edit_from").serializeArray();
                $.post("{:url('Category/update')}", res, function (data) {
                    if (data.error > 0) {
                        toastr.error(data.msg);
                    } else {
                        toastr.success(data.msg);
                        jQuery('#modal-edit').modal('hide');
                        location.reload();
                    }
                }, "json");
            }

            //del
            function del(id) {
                if (confirm("确定要删除吗？")) {
                    $.post("{:url('Category/delete')}", {id: id}, function (data) {
                        if (data.error > 0) {
                            toastr.error(data.msg);
                        } else {
                            toastr.success(data.msg);
                            location.reload();
                        }
                    }, "json");
                }
            }
        </script>